<template>
  <el-aside id="asideNav" width="250px" height="100%">
    <div class="logo-name">
      <p>人事管理系统</p>
      <img src="../assets/logo.png" class="logo-png"/>
    </div>

    <div >
      
    </div>

    <el-menu
      active-text-color="#3CA2E0"
      background-color="rgb(48,65,86)"
      :default-active="$route.path"
      :router="true"
      unique-opened
      text-color="#fff"
    >
      <template v-for="menu in $store.getters.menus">
        <el-sub-menu :index="menu.menusIndex">
          <template #title>
            <el-icon>
              <component :is="menu.icon" />
            </el-icon>
            <span>{{menu.title}}</span>
          </template>
          <template v-for="menu in menu.children">
            <el-menu-item :index="menu.path">
              <!-- <el-icon>
                <component :is="menu.icon" />
              </el-icon> -->
              {{menu.title}}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-aside>
</template>
  
  <script>
export default {
  name: "Aside",
  methods: {},
  watch: {
    // 监听浏览器直接输入路由，将此路由添加到tabs
    "$route.path": {
      handler: function(newVal, oldVal) {
        if (true) {
          return;
        }
        //判断当前tab中是否已经存在
        let index = this.$store.getters.tabs.findIndex(function(value, key) {
          return value.path === newVal;
        });
        if (index != -1 || newVal == "/login") {
          return;
        }
        let menuName = this.$store.getters.getMenuNameByUrl(newVal);
        //手动构建tab
        this.$store.commit("addTab", {
          title: menuName,
          path: newVal
        });
      },
      immediate: true
    }
  }
};
</script>
  
<style scoped>
#asideNav {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: rgb(48,65,86);
}

#asideNav .logo-name {
  width: 100%;
  height: 150px;
  background-color: rgb(48,65,86);
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
#asideNav .logo-name .logo-png {
  width: 200px;
  height: auto;
}
#asideNav .logo-name p {
  font-weight: 800;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  /* font-weight: 550; */
  flex: 1;
  border-right: none;
  overflow-y: auto; /* 添加滚动条以防内容过多 */
  background-color: rgb(48,65,86);
}
</style>